<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			.mui-content,
			html,
			body {
				background-color: #FFFFFF;
				overflow: hidden;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: #FEB406;
			    border-bottom: 2px solid #F6047F;
			    background: 0 0;
			}
			
			.mui-input-row {
				height: 40px;
				margin: 20px;
			}
			
			.mui-input-row input {
				width: 55%;
				margin-left: 10%;
				border: 1px solid #FEB406;
				border-radius: 5px 0 0 5px;
			}
			
			.mui-input-row button.btn-main {
				display: inline-block;
				height: 40px;
				margin: 0;
				border-radius: 0 5px 5px 0;
				border: none;
				width: 25%;
				position: absolute;
				font-size: 12px;
			}
			
			.mui-input-row .mui-input-clear~.mui-icon-clear {
				right: 35%;
			}
			
			.history h5 {
				text-align: left;
				margin: 10px;
			}
			
			.history h5 i.iconfont {
				font-size: 20px;
			}
			
			ul.search-history {
				margin: 15px;
				padding: 0;
			}
			
			.search-history li{
				font-size: 14px;
				display: inline-block;
				padding: 2px 5px;
				margin-right: 15px;
				margin-bottom: 10px;
				border: 1px solid #9C9C9C;
				border-radius: 5px;
				color: #9C9C9C;
				text-align: left;
			}
			
			a.clean-history {
				padding: 0 5px;
				background-color: #FFFFFF;
				color: #9C9C9C;
				width: 45%;
				height: 35px;
				line-height: 35px;
				margin: 20px 28%;
				border: 1px solid #9C9C9C;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">搜索</h1>
		</header>
		<div class="mui-content">
			<form class="mui-input-row">
				<input type="text" id="search" placeholder="找帮办、去帮办" class="mui-input-clear"/>
				<button type="button" class="btn-main" id="searchbtn">点击搜索</button>
			</form>
			<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
				<a class="mui-control-item mui-active" href="#item1">
					找帮办
				</a>
				<a class="mui-control-item" href="#item2">
					去帮办
				</a>
			</div>
			<div id="item1" class="mui-control-content mui-active">
				<div class="history">
					<h5><i class="iconfont">&#xe657;</i> 最近搜过</h5>
					<ul class="search-history" id="artistHistory"></ul>
				</div>
			</div>
			<div id="item2" class="mui-control-content">
				<div class="history">
					<h5><i class="iconfont">&#xe657;</i> 最近搜过</h5>
					<ul class="search-history" id="artshowHistory"></ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.plusReady(function() {
			var $search = $("#search");
			var $searchbtn = $("#searchbtn");
			var indexPage = plus.webview.getLaunchWebview();
			var index;
			
			// 生成搜索历史列表
			createHistoryList(document.getElementById("artistHistory"),
				JSON.parse(plus.storage.getItem('artistHistory')));
			createHistoryList(document.getElementById("artshowHistory"),
				JSON.parse(plus.storage.getItem('artshowHistory')));
			plus.nativeUI.closeWaiting();
			
			// 清理对应的搜索历史
			mui('.mui-content').on('tap', '.clean-history', function() {
				index = $(".mui-control-content.mui-active").index('.mui-control-content');
				$(this).parent('ul').hide();
				plus.storage.removeItem(index ? 'artshowHistory' : 'artistHistory');
			})
			
			// 切换搜索类型
			mui('.mui-segmented-control').on('tap', '.mui-control-item', function() {
				$searchbtn.text($(this).text());
			})
			
			// 点击搜索按钮进行搜索
			mui('.mui-input-row').on('tap', '#searchbtn', function() {
				if($search.val()) {
					search($search.val());
					index = $(".mui-control-content.mui-active").index('.mui-control-content');
					// 更新本地存储搜索历史
					var searchHistory = plus.storage.getItem(index ? 'artshowHistory' : 'artistHistory');
					var historyArr = searchHistory ? JSON.parse(searchHistory) : [];
					historyArr.unshift($search.val()); // 插入到数组第一个元素之前
					plus.storage.setItem(index ? 'artshowHistory' : 'artistHistory', JSON.stringify(historyArr));
				}
			})
			
			// 点击搜索历史进行搜索
			mui('.search-history').on('tap', 'li', function() {
				search(this.innerText);
			})
			
			/**
			 * 生成搜索历史列表
			 * @param {Object} parent	列表
			 * @param {Object} data		搜索历史数据
			 */
			function createHistoryList(parent, data) {
				if(data) {
					for (var i = 0; i < data.length; i++) {
						var item = document.createElement("li");
						item.innerText = data[i];
						parent.appendChild(item);
					}
					$(parent).append('<a class="mui-btn clean-history">'+
						'<i class="iconfont">&#xe630; </i> 清空搜索历史</a>');
				}
			}

			function search(key) {
				plus.nativeUI.showWaiting();
				setTimeout(function() {
					plus.nativeUI.closeWaiting();
					mui.back();
				}, 500);
				var data = {};
				index = $(".mui-control-content.mui-active").index('.mui-control-content');
				data.targetTab = index ? 'artshow' : 'artist';
				data.type = index ? 'artshowKey' : 'artistKey';
				plus.storage.setItem(data.type, key);
				//mui.toast('search 存储发送' + data.type + plus.storage.getItem(data.type));
				mui.fire(indexPage, 'goTab', data);
			}
		})
	</script>

</html>